import React, { useRef } from 'react'
import './index.css'
import { handlerDate, useDefer } from '../../utils/index'
import { Button, Image, message } from 'antd'

function CommonList({ list, changeArticleStatus, getData, children }) {
  //分堆渲染
  const defer = useDefer(list.length)

  //发布文章
  const handlerPublish = async id => {
    try {
      let res = await changeArticleStatus({
        id,
        doneType: 0
      })
      message.success('发布成功')
      //触发父组件更新新闻列表
      getData(id)
    } catch (error) {
      message.error('异常')
      console.log('err', error)
    }
  }

  return (
    <>
      {children}
      <ul className="flex flex-col ">
        {list.map((child, index) => {
          return child.status == 1 && defer(index) ? (
            <li className="flex justify-around hover:bg-[#fafafa] cursor-pointer" key={child.id}>
              <div className="CommonList-item">{child.id}</div>
              <div className="CommonList-item">{child.title}</div>
              <div className="CommonList-item justify-center">
                {
                  <Image
                    width={70}
                    height={70}
                    src={child.articleImg}
                    fallback=""
                  />
                }
              </div>
              <div className="CommonList-item">{handlerDate(child.pubDate)}</div>
              <div className="CommonList-item">{child.type}</div>
              <div className="CommonList-item">
                <Button type="primary" onClick={() => handlerPublish(child.id)}>
                  发布
                </Button>
              </div>
            </li>
          ) : (
            ''
          )
        })}
      </ul>
    </>
  )
}

export default CommonList
